<template>
  <div class="stats-container">
    <h3 class="stats-container__title">{{ title }}</h3>
    <div class="stats-grid">
      <StatCard
        v-for="stat in data"
        :key="stat.title"
        :title="stat.title"
        :value="stat.value"
        :change="stat.change"
        :trend="stat.trend"
        :hover="hover"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import StatCard from './StatCard.vue'
import type { StatItem } from '@/data/mockData'

interface Props {
  title: string
  data: StatItem[]
  hover?: boolean
}

withDefaults(defineProps<Props>(), {
  hover: true
})
</script>

<style scoped>
.stats-container {
  background: rgba(30, 58, 95, 0.6);
  border: 1px solid rgba(74, 144, 226, 0.3);
  border-radius: 8px;
  padding: 20px;
  backdrop-filter: blur(10px);
  margin-bottom: 20px;
}

.stats-container__title {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #4a90e2;
  border-bottom: 1px solid rgba(74, 144, 226, 0.3);
  padding-bottom: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
</style>